import React from "react";
import axios from "axios";
import { SearchOutlined } from '@ant-design/icons';
import { Button, Input, Space, Table } from 'antd';
import Highlighter from 'react-highlight-words';
axios.defaults.timeout = 6000;
class Ljf extends React.Component {
  constructor() {
    super();
    this.state = {
      a: [],
      b: [],
      c: [],
      d: [],
      e: [],
      f: [],
      g: [],
      h: [],
      i: [],
      j: [],
      k: [],
      l: [],
      m: [],
      searchText:"",
      searchedColumn:"",
    };
    this.searchInput= React.createRef(null)
  }

  /* 
  a= 蔡正平= 43.153.65.89
  b= 郭发展=  43.153.79.98
  c = 郭蒋平= 43.135.172.133
  d  = 郭凯鸿6=43.152.217.89
  e=  郭煜尚7= 43.158.210.229
  f= 李瑶瑶2= 43.158.194.253
  g=  潘秀丽1= 43.134.231.239
  h=    彭香兰8=  43.135.155.149
  i= 叶凤华3=43.156.231.195
  j= 沈信义5=119.28.250.113
  k=刘爱绿4=119.28.250.113
  */
  componentDidMount() {
    // 账号1的高度a
    axios
      .get("http://43.153.65.89:31401")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          a: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ a: "0" });
      });
    //账号2高度b
    axios
      .get("http://43.153.97.38:41000")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          b: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ b: "0" });
      });
    //账号3高度c
    axios
      .get("http://43.135.172.133:31401")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          c: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ c: "0" });
      });
    //账号4高度d
    axios
      .get("http://43.153.90.179:41003")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          d: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ d: "0" });
      });
    //账号5高度e
    axios
      .get("http://43.153.8.22:41002")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          e: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ e: "0" });
      });
    //账号6高度f
    axios
      .get("http://43.134.92.242:41002")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          f: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ f: "0" });
      });
    //账号7高度g
    axios
      .get("http://43.134.92.242:41003")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          g: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ g: "0" });
      });
    //账号8高度h
    axios
      .get("http://49.51.199.214:41000")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          h: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ h: "0" });
      });
    //账号9高度i
    axios
      .get("http://124.156.0.114:41000")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          i: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ i: "0" });
      });
    //账号10高度j
    axios
      .get("http://43.153.20.194:41008")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          j: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ j: "0" });
      });
    //账号11高度k
    axios
      .get("http://43.153.101.126:41000")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          k: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ k: "0" });
      });
       //账号12高度l
    axios
      .get("http://43.153.17.139:41000")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          l: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ l: "0" });
      });
       //账号13高度m
    axios
      .get("http://43.153.65.89:31401")
      .then((res) => {
        console.log(res.data.core_latest_ledger);
        this.setState({
          m: res.data.core_latest_ledger,
        });
      })
      .catch((err) => {
        this.setState({ m: "0" });
      });
  }
  render() {
    const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm();
      this.setState({searchText:selectedKeys[0]});
      this.setState({searchedColumn:dataIndex});
    }
    const handleReset = (clearFilters) => {
      clearFilters();
      this.setState({searchText:""});
    };
    const getColumnSearchProps = (dataIndex) => ({
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
        <div
          style={{
            padding: 8,
          }}
          onKeyDown={(e) => e.stopPropagation()}
        >
          <Input
            ref={this.searchInput}
            placeholder={`Search ${dataIndex}`}
            value={selectedKeys[0]}
            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
            style={{
              marginBottom: 8,
              display: 'block',
            }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
              icon={<SearchOutlined />}
              size="small"
              style={{
                width: 90,
              }}
            >
             搜索
            </Button>
            <Button
              onClick={() => clearFilters && handleReset(clearFilters)}
              size="small"
              style={{
                width: 90,
              }}
            >
             重置
            </Button>
            <Button
              type="link"
              size="small"
              onClick={() => {
                confirm({
                  closeDropdown: false,
                });
                this.setState({searchText:selectedKeys[0]});
               this.setState({searchedColumn:dataIndex});
               
              }}
            >
            恢复
            </Button>
            <Button
              type="link"
              size="small"
              onClick={() => {
                close();
              }}
            >
             关闭
            </Button>
          </Space>
        </div>
      ),
      filterIcon: (filtered) => (
        <SearchOutlined
          style={{
            color: filtered ? '#1677ff' : undefined,
          }}
        />
      ),
      onFilter: (value, record) =>
        record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
      onFilterDropdownOpenChange: (visible) => {
        if (visible) {
          setTimeout(() => this.searchInput.current?.select(), 100);
        }
      },
      render: (text) =>
        this.state.searchedColumn === dataIndex ? (
          <Highlighter
            highlightStyle={{
              backgroundColor: '#ffc069',
              padding: 0,
            }}
            searchWords={[this.state.searchText]}
            autoEscape
            textToHighlight={text ? text.toString() : ''}
          />
        ) : (
          text
        ),
    });
    const dataSource = [
      {
        key: "1",
        name: " 蔡正平（刘晓陆）",
        address: this.state.a,
        differ: this.state.a - this.state.a,
        todesk:'260 957 454',
        ip: (
          <a href="http://43.153.65.89:31401" target="_blank">
            43.153.65.89
          </a>
        ),
        des: "云服务器美国",
      },
      {
        key: "2",
        name: "郭发展（刘晓陆）",
        address: this.state.b,
        differ: this.state.a - this.state.b,
        todesk:'126 339 264',
        ip: (
          <a href="http://43.153.97.38:41000" target="_blank">
          43.153.97.38 192.168.10.51
          </a>
        ),
        des: "云服务器美国",
      },
     
      {
        key: "3",
        name: "郭蒋平（刘晓陆）",
        address: this.state.c,
        differ: this.state.a - this.state.c,
        todesk:'422 095 693',
        ip: (
          <a href="http://43.135.172.133:31401" target="_blank">
           43.135.172.133
          </a>
        ),
        des: "云服务器美国",
      },
      {
        key: "4",
        name: "郭凯鸿6 （刘晓陆）",
        address: this.state.d,
        differ: this.state.a - this.state.d,
        todesk:'289 050 825',
        ip: (
          <a href="http://43.153.90.179:41003" target="_blank">
           43.153.90.179  192.168.10.54
          </a>
        ),
        des: <font color='red'>云服务器孟买</font>,
      },
      {
        key: "5",
        name: "郭煜尚7（刘晓陆）",
        address: this.state.e,
        differ: this.state.a - this.state.e,
        todesk:'228 944 273',
        ip: (
          <a href="http://43.153.8.22:41002" target="_blank">
           43.153.8.22  192.168.10.53
          </a>
        ),
        des: <font color='red'>云服务器孟买</font>,
      },
      {
        key: "6",
        name: "李瑶瑶2 （刘晓陆）",
        address: this.state.f,
        differ: this.state.a - this.state.f,
        todesk:'334 379 413',
        ip: (
          <a href="http://43.134.92.242:41002" target="_blank">
          43.134.92.242  192.168.10.53
          </a>
        ),
        des: <font color='red'>云服务器孟买</font>,
      },
      {
        key: "7",
        name: "潘秀丽1 （刘晓陆）",
        address: this.state.g,
        differ: this.state.a - this.state.g,
        todesk:'123 801 348',
        ip: (
          <a href="http://43.134.92.242:41003" target="_blank">
         43.134.92.242  192.168.10.54
          </a>
        ),
        des: "云服务器新加坡",
      },
      {
        key: "8",
        name: "彭香兰8（刘晓陆）",
        address: this.state.h,
        differ: this.state.a - this.state.h,
        todesk:'595 484 048',
        ip: (
          <a href="http://49.51.199.214:41000" target="_blank">
         49.51.199.214 192.168.10.51
          </a>
        ),
        des: "云服务器美国",
      },
      {
        key: "9",
        name: " 叶凤华3（刘晓陆）",
        address: this.state.i,
        differ: this.state.a - this.state.i,
        todesk:'397 577 821',
        ip: (
          <a href="http://124.156.0.114:41000" target="_blank">
           124.156.0.114  192.168.10.51
          </a>
        ),
        des: "云服务器新加坡",
      },
      
      {
        key: "10",
        name: "沈信义5（刘晓陆）",
        address: this.state.j,
        differ: this.state.a - this.state.j,
        todesk:'910 610 767',
        ip: (
          <a href="http://43.153.20.194:41008" target="_blank">
         43.153.20.194  192.168.10.59
          </a>
        ),
        des: "云服务器新加坡",
      },
      {
        key: "11",
        name: " 刘爱绿4（刘晓陆）",
        address: this.state.k,
        differ: this.state.a - this.state.k,
        todesk:'495 024 351',
        ip: (
          <a href="http://43.153.101.126:41000" target="_blank">
           43.153.101.126  192.168.10.51
          </a>
        ),
        des: <font color='red'>云服务器孟买</font>,
      },
      {
        key: "12",
        name: "刘爱莲（刘晓陆）",
        address: this.state.l,
        differ: this.state.a - this.state.l,
        todesk:'871 944 691',
        ip: (
          <a href="http://43.153.17.139:41000" target="_blank">
          43.153.17.139  192.168.10.51
          </a>
        ),
        des: "云服务器新加坡",
      },
      {
        key: "13",
        name: "蔡正理 （刘晓陆）",
        address: this.state.m,
        differ: this.state.a - this.state.m,
        todesk:'260 957 454',
        ip: (
          <a href="http://43.153.65.89:31401" target="_blank">
          43.153.65.89
          </a>
        ),
        des: '云服务器美国',
      },
    ];
    const columns = [
      {
        title: "业主名字",
        dataIndex: "name",
        key: "name",
        ...getColumnSearchProps('name'),
      },
      {
        title: "区块高度",
        dataIndex: "address",
        key: "address",
      },
      {
        title: "区块延迟数值",
        dataIndex: "differ",
        key: "differ",
        sorter: {
          compare: (a, b) => a.differ - b.differ,
          multiple: 3,
        },
      },
      {
        title: "todesk",
        dataIndex: "todesk",
        key: "todesk",
        ...getColumnSearchProps('todesk'),
      },
      {
        title: "云服务器ip地址",
        dataIndex: "ip",
        key: "ip",
      },
      {
        title: "云服务器地区",
        dataIndex: "des",
        key: "des",
      },
    ];
    return (
      <div>
       
        <center><font size="18" color="red">
         李金福13台节点区块高度
        </font></center>
        <Table dataSource={dataSource} columns={columns} />;
      </div>
    );
  }
}

export default Ljf;
